/*
 * Copyright 2022 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../Tree/mixins';
@import '../Wizard/Colors';
@import '../Terminal/mixins';
@import '../ProgressStepper/mixins';

$code-color: var(--color-base0F);
$choice-color: var(--color-base0E);

@mixin ABitGray {
  filter: grayscale(25%);
}

@mixin DependenceTree {
  @include Tree {
    &.kui--dependence-tree {
      @content;
    }
  }
}

@mixin DependenceTreeSubTaskIcon {
  .kui--dependence-tree-subtask--icon {
    @content;
  }
}

@mixin SmallerFonts {
  @include DependenceTree {
    $code-font-size: 0.6875rem;
    $font-size: 0.75rem;
    $spacer-md: 0.875rem;
    $guide-top: 0.6875rem;
    $guide-width: 0.5625rem;

    font-size: $font-size;

    ul {
      /** Overrides some other LeftStrip rules */
      font-size: $font-size;
    }

    --pf-global--FontSize--md: #{0.5 * $font-size};
    --pf-global--spacer--sm: #{0.333 * $font-size};
    --pf-global--spacer--md: #{$spacer-md};
    --pf-c-tree-view--m-guides__node--before--Top: #{$guide-top};
    --pf-c-tree-view--m-guides__node--before--Width: #{$guide-width};

    code {
      font-size: $code-font-size;
    }
  }
}

@include Scrollback {
  @include LeftStrip {
    @include SmallerFonts;
  }
  @include RightStrip {
    @include SmallerFonts;
  }
}

@include DependenceTreeSubTaskIcon {
  color: var(--color-brand-01);
}

.kui--validator {
  @include Success {
    color: $complete-color;
  }
  @include Error {
    color: $error-color;
  }
}

@include DependenceTree {
  code {
    font-size: 0.75rem;
    color: $code-color;
    @include ABitGray;
  }

  svg {
    @include Success {
      color: $complete-color;
    }
  }

  /** We hijack "isRead" badges to mean that the subtree is complete. And for these, we use a badge, so we can "mute" these badges. */
  .pf-c-badge.pf-m-unread {
    padding: 0;
    min-width: unset;
    background-color: transparent;
  }

  strong {
    font-weight: 500;
    color: $choice-color;
    @include ABitGray;
  }

  button {
    font-size: inherit;
  }

  @include TreeAction {
    padding-top: 0;
    padding-bottom: 0;
  }

  @include TreeItemButton {
    @include Spinner {
      width: auto;
      display: inline-flex;
      --sk-color: var(--color-yellow);
    }
  }
}
